<template>
    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh"> 
        <van-list
      v-model:loading="loading"   
      :finished="finished"
      finished-text="没有更多了"
      @load="OnLoad"
    >   
    <div class="rank_header">
        <div class="title">
            <span>礼盒装唇釉热销榜</span>
        </div>
    </div>
    <div class="rank_box">
        <div class="item" v-for="item in CouponList" :key="item.id">
            <div class="top">
                <div class="img">
                    <img src="/assets/images/02.jpg" />
                </div>
                <div class="content">
                    <div class="title">口红礼盒口红礼盒口红礼盒</div>
                    <p class="middle"><span>值得买</span>好心动抹浓郁显色</p>
                    <p class="desc">“很好看宝宝们”</p>
                </div>
            </div>
            <div class="footer">
                <div class="price">
                    ￥<span>{{item.total}}</span>
                    券后价
                    <span>极速退款</span>
                </div>

                <!-- <van-action-bar-button class="btn" type="btn" text="去购买" @click="Btn" /> -->
                <div class="btn" @click="Btn">
                    去购买>
                </div>
            </div>
            <div class="tip">
                <img src="/assets/images/hot.png" />
                <span>热销指数9.9</span>
            </div>
        </div>
    </div>

    
</van-list>
</van-pull-refresh>
    <Tabbar />
  </template>
  
  <script setup>
    const {proxy} = getCurrentInstance() // 获取当前实例
    let business = proxy.$business // 获取业务逻辑
    const CouponList = ref([]) // 商品列表
    const refreshing = ref(false);  // 是否正在刷新
    const finished = ref(false);   //是否加载完毕
    const loading = ref(false);   // 是否加载中
    const page = ref(1);  // 页码

    const OnRefresh = () => {
    //清空查询参数
    finished.value = false;
    CouponList.value = [];
    page.value = 1;
    loading.value = true;
     refreshing.value = true;

    //加载数据方法
    //setTimeout JavaScript内置函数，用于延迟执行代码,OnLoad	要延迟执行的函数名称（需已定义）
    setTimeout(OnLoad,1500);
    
  }

  const OnLoad = async () => {  //async	声明函数为异步函数，允许使用 await 关键字
    //如果等于true说明当期进行下拉刷新
    if(refreshing.value){
      //结束下拉刷新
      refreshing.value = false;
    }
    let params = {
        page: page.value,
        busid: business.value.id
    }

    var result = await proxy.$POST({url:'/product/rank',params})

    // return false

    if(result.code == 0) //如果请求失败
    {
      proxy.$fail(result.msg) //提示错误信息
      finished.value = true; //没有更多数据
    }
    CouponList.value = result.data.list
    console.log(result.data)
    console.log(CouponList)
    finished.value = true;
}

const Btn = () => proxy.$router.push('/cart/confirm')

  </script>
  
  <style scoped>
    @import url('/assets/css/ProductRank.css');
  </style>